<template>
  <view class="conter">
    <view class="tab flex flex-row items-center justify-between">
      <view class="tab-item " :class="active==index?'active':''" v-for="(item,index) in tablist" :key="index"
        @click="tabtop(index)">
        {{item.name}}
      </view>
    </view>
    <template v-if="active==0">
      <view class="pt ptone flex flex-col ">

        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">抽奖名称</text>
          <view class="flex flex-row mr5">
            <input class="input f_28 c_52" type="text" value="" v-model="prize.name" placeholder="请输入抽奖名称"
              placeholder-class="f_28 c_ae" />
          </view>
        </view>
        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">奖品图片</text>
          <view class="flex flex-row mr5" @click.stop='uploadpic'>
            <image v-if="prize.image" :src="prize.image" mode="" style="width: 50rpx;height: 50rpx;"></image>
            <image v-else src="@/static/zx.svg" mode="" style="width: 50rpx;height: 50rpx;" ></image>
          </view>
        </view>
        <!-- <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">最多参与</text>
          <view class="flex flex-row mr5 items-center">
            <input class="input f_28 c_52" type="number" value="" v-model="prize.maxpeople" placeholder="请输入最多参与多少"
              placeholder-class="f_28 c_ae" /><text class="ml10 f_28 c_52">人</text>
          </view>

        </view> -->

        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">最少参与</text>
          <view class="flex flex-row mr5 items-center ">
            <input class="input f_28 c_52" type="number" value="" placeholder-class="f_28 c_ae"
              v-model="prize.minpeople" placeholder="请输入最少参与多少" />
            <text class="ml10 f_28 c_52">人</text>
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center" @click="sele()">
          <text class="c_52 f_28">开奖时间</text>
          <view class="flex flex-row mr5 items-center"><text class="f_28"
              :class="prize.starttime?'c_52':'c_ae'">{{prize.starttime?prize.starttime:'请选择时间'}}</text>
            <image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
          </view>

        </view>


        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">开奖时长</text>
          <view class="flex flex-row mr5">
            <picker @change="confirmscnew" :value="0" :range="columns">
              <view class="flex flex-row f_28 items-center">
                <input disabled="true" class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
                  v-model="prize.time" placeholder="请选择开奖时长" />
                <text class="ml10 f_28 c_52">分钟</text>
              </view>


            </picker>
          </view>

        </view>

        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">自动开奖</text>
          <view class="flex flex-row mr5">
            <switch class='switchBox' @change="switchChange" color="#DF4B43" :checked="prize.autoOpen" />
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">粉丝福利</text>
          <view class="flex flex-row mr5">
            <switch class='switchBox' @change="switchFanChange" color="#DF4B43" :checked="prize.onlyFollow" />
          </view>
        </view>


        <view class="item w100 flex flex-row justify-between items-center">

          <view class="flex flex-row w100">
            <textarea value="" placeholder="请输入抽奖说明" v-model="prize.remark" />
          </view>

        </view>

      </view>
      <view class="pt  flex flex-col mt_20" v-for="(item,index) in createitem" :key="index">
        <view class="set">
          <view class="del" v-if="createitem.length>1" @click="del(index)">
            <image src="@/static/mine/del.svg" mode="widthFix" style="width: 30rpx;"></image>
          </view>

          <view class="item w100 flex flex-row justify-between items-center">
            <text class="c_52 f_28">奖品名称</text>
            <view class="flex flex-row mr5">
              <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value="" v-model="item.title"
                placeholder="请输入奖品名称" />
            </view>

          </view>
          <view class="item w100 flex flex-row justify-between items-center">
            <text class="c_52 f_28" style="width: 200rpx;">奖品类型</text>
            <view class="flex flex-row justify-end" style="width: 100%;">
              <picker @change="bindPickerChange($event,index)" :value="0" :range="rangeArr" range-key="text">
                <view class="flex flex-row f_28" :class="item.prizeType?'c_52':'c_ae'">
                  {{item.prizeType!=''?item.prizeTypeLabel:'选择奖品类型'}}
                  <image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
                </view>


              </picker>

              <!-- <text
								:class="item.prizetype?'c_3':'c_9'">{{item.prizetype!=''?item.prizetype:'选择奖品类型'}}</text> -->

            </view>
            <view class="uni-list-cell-db">

            </view>
          </view>

          <view class="item w100 flex flex-row justify-between items-center" v-if="item.prizeType==2">
            <text class="c_52 f_28" style="width: 200rpx;">优惠券类型</text>
            <view class="flex flex-row justify-end" style="width: 100%;">
              <picker @change="bindPickerChange1($event,index)" :value="0" :range="rangecounp" range-key="name">
                <view class="flex flex-row f_28" :class="item.relateId?'c_52':'c_ae'">
                  {{item.relateId!=''?item.prizecounpType:'选择优惠券类型'}}
                  <image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
                </view>


              </picker>

              <!-- <text
								:class="item.prizetype?'c_3':'c_9'">{{item.prizetype!=''?item.prizetype:'选择奖品类型'}}</text> -->

            </view>
            <view class="uni-list-cell-db">

            </view>
          </view>
          <view class="item w100 flex flex-row justify-between items-center" v-else-if="item.prizeType==4">
            <text class="c_52 f_28" style="width: 200rpx;">红包金额</text>
            <view class="flex flex-row justify-end" style="width: 100%;">
              <view class="flex flex-row mr5">
                <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value="" v-model="item.money"
                  placeholder="请输入红包金额" />
              </view>

              <!-- <text
								:class="item.prizetype?'c_3':'c_9'">{{item.prizetype!=''?item.prizetype:'选择奖品类型'}}</text> -->

            </view>
            <view class="uni-list-cell-db">

            </view>
          </view>

          <view class="item w100 flex flex-row justify-between items-center">
            <text class="c_52 f_28">奖品数量</text>
            <view class="flex flex-row mr5">
              <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="number" value="" v-model="item.count"
                placeholder="请输入数量" />
            </view>

          </view>



          <view class="item w100 flex flex-row justify-between items-center">
            <text class="c_52 f_28">兑奖方式</text>
            <view class="flex flex-row mr5">

              <picker @change="bindPickerChangefs($event,index)" :value="0" :range="rangereceive" range-key="text">
                <view class="flex flex-row f_28 items-center" :class="item.receiveType?'c_52':'c_ae'">
                  {{item.receiveType!=''?item.receiveTypeLabel:'选择兑奖方式'}}
                  <image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
                </view>


              </picker>


            </view>

          </view>

          <view class="item w100 flex flex-row justify-between items-center" @click="showendtime(index)">
            <text class="c_52 f_28">兑奖截止时间</text>
            <view class="flex flex-row mr5 f_28 items-center"><text
                :class="item.endTime?'c_52':'c_ae'">{{item.endTime?item.endTime:'请选择时间'}}</text>
              <image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
            </view>
          </view>

          <mx-date-picker color="#DF4B43" :show="item.show" :type="type" :show-seconds="true" :value="item.endTime"
            @confirm="confirmnew($event,index)" @cancel="closeendtime(index)" />


        </view>

      </view>
      <view class="but mt_20" @click="addluck" v-if="createitem.length<8">
        <view class="addbtn flex flex-row justify-center items-center">
          <image src="@/static/index/add.svg" mode="widthFix" style="width: 40rpx;" class="mr10"></image>
          <text>增加奖项</text>
        </view>

      </view>

    </template>


    <template v-else>
      <view class="pt ptone flex flex-col">

        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">抽奖名称</text>
          <view class="flex flex-row mr5">
            <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value="" v-model="prize.name"
              placeholder="请输入奖品名称" />
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">最多参与</text>
          <view class="flex flex-row mr5">
            <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value="" v-model="prize.maxpeople"
              placeholder="请输入最多参与多少" /><text class="ml10">人</text>
          </view>

        </view>

        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">最少参与</text>
          <view class="flex flex-row mr5 items-center">
            <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value="" v-model="prize.minpeople"
              placeholder="请输入最少参与多少" />
            <text class="ml10">人</text>
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center" @click="sele()">
          <text class="c_52 f_28">开奖时间</text>
          <view class="flex flex-row mr5 items-center"><text class="f_28"
              :class="prize.starttime?'c_52':'c_ae'">{{prize.starttime?prize.starttime:'请选择时间'}}</text>

            <image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
          </view>

        </view>


        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">开奖时长</text>
          <view class="flex flex-row mr5">
            <picker @change="confirmscnew" :value="0" :range="columns">
              <view class="flex flex-row f_28 items-center ">
                <input disabled="true" class="input f_28 c_52" placeholder-class="f_28 c_ae" type="text" value=""
                  v-model="prize.time" placeholder="请选择开奖时长" />
                <text class="ml10 f_28 c_52">分钟</text>
              </view>


            </picker>
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">红包金额</text>
          <view class="flex flex-row mr5">
            <input class="input f_28 c_52" placeholder-class="f_28 c_ae" type="digit" value="" v-model="prize.money"
              placeholder="请输入金额" />
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">自动开奖</text>
          <view class="flex flex-row mr5">
            <switch class='switchBox' @change="switchChange" color="#DF4B43" :checked="prize.autoOpen" />
          </view>

        </view>
        <view class="item w100 flex flex-row justify-between items-center">
          <text class="c_52 f_28">粉丝福利</text>
          <view class="flex flex-row mr5">
            <switch class='switchBox' @change="switchFanChange" color="#DF4B43" :checked="prize.onlyFollow" />
          </view>
        
        </view>
        <view class="item w100 flex flex-row justify-between items-center">

          <view class="flex flex-row w100">
            <textarea value="" placeholder="请输入抽奖说明" v-model="prize.remark" />
          </view>

        </view>





      </view>

    </template>

    <view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">

      <view class="btn background_red" :class="{'mb_20': !isIPhoneX}" @click="sub_draw">
        提交</view>


    </view>
    <mx-date-picker color="#DF4B43" :show="showPicker" :show-seconds="true" :type="type" :value="value" @confirm="ed"
      @cancel="ed" />
  </view>
</template>

<script>
  import {
    Debounce
  } from '@/utils/validate.js'
  import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
  import {
    creatDraw,
    couponlist,
    subscribeAll
  } from '@/api/activity.js';
  const desStr = "抽奖奖品可搜索淘宝店铺【久久的零钱罐】查看详情，物流实物中奖后提交收货地址兑奖；自提实物中奖上门核销兑奖；进度查询可进入商家详情界面添加商家微信或者联系客服；截止兑奖时间过后未兑奖视为放弃奖品";
  const moneyStr = '红包抽奖中奖金额会直接更新到余额，余额满一定数值可以提现；余额可以兑换积分、购买抽奖次数、购买秒杀和拼团商品'
  export default {
    components: {
      MxDatePicker
    },
    data() {
      return {
        isIPhoneX: this.isIPhoneX,
        showPicker: false,
        date: '2019/01/01',
        time: '15:00:12',
        datetime: '2019/01/01 15:00:12',
        range: ['2019/01/01', '2019/01/06'],
        rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
        type: 'rangetime',
        value: '',
        prizecounpType: '',
        rangecounp: [],
        prizecounpTypeLabel: '',
        showsc: false,
        columns: [
          '5分钟', '10分钟', '15分钟'
        ],
        prize: {
          name: '',
          maxpeople: '',
          minpeople: '',
          starttime: '',
          time: '',
          lucknum: '',
          image: '',
          remark: desStr,
          autoOpen: false,
          onlyFollow: false
        },
        show: false,
        value1: Number(new Date()),
        starttime: '',
        fileList1: [],


        active: 0,
        tablist: [{
          id: 1,
          name: '普通抽奖'
        }, {
          id: 2,
          name: '红包抽奖'
        }],
        hb: {
          name: '',
          money: '',
          num: '',
          people: ''
        },
        addpoint: {
          title: '',
          prizeType: 3,
          prizeTypeLabel: '积分',
        },
        additem: {
          title: '',
          goods: '',
          count: 1,
          chance: '',
          type: '',
          prizeType: '',
          prizeTypeLabel: '',
          money: '',
          matchType: 0,
          prizecounpTypeLabel: '',
          relateId: '',
          endTime: '',
          receiveType: '',
          receiveTypeLabel: '',
          show: false

        },
        createitem: [{
          title: '',
          goods: '',
          count: 1,
          chance: '',
          type: '',
          prizeType: '',
          prizeTypeLabel: '',
          money: "",
          prizecounpTypeLabel: '',
          receiveType: '',
          receiveTypeLabel: '',
          relateId: '',
          endTime: '',
          show: false,
          matchType: 0,

        }],
        rangereceive: [{
            value: 1,
            text: '物流'
          },
          {
            value: 2,
            text: '自提'
          }
        ],
        rangeArr: [{
            value: 1,
            text: '实物'
          }

          // {
          //   value: 2,
          //   text: '优惠券'
          // },

          // {
          //   value: 3,
          //   text: '积分'
          // },

          // {
          //   value: 4,
          //   text: '红包'
          // }
        ]
      }
    },
    onReady() {
      // 微信小程序需要用此写法
      //this.$refs.datetimePicker.setFormatter(this.formatter)
    },
    onShow() {
      this.getcoupon()
    },
    methods: {
      switchChange(e) {

        this.prize.autoOpen = e.detail.value
      },
      async switchFanChange(e) {
        this.prize.onlyFollow = e.detail.value
        
      },

      // 时间转换
      gettime() {
        let date = new Date();

        let year = date.getFullYear();
        let month = this.pad(date.getMonth() + 1); // getMonth() is zero-based
        let day = this.pad(date.getDate());

        let hours = this.pad(date.getHours());
        let minutes = this.pad(date.getMinutes());
        let seconds = this.pad(date.getSeconds());

        let formattedDate = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        return formattedDate

      },
      pad(number) {
        if (number < 10) {
          return '0' + number;
        }
        return number;
      },
      uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					that.prize.image = res.data.url;
				});
			},
      onShowDatePicker(type) { //显示
        this.type = type;
        this.showPicker = true;
        this.value1 = this.gettime();
        console.log(this.value)
      },
      ed(e) { //选择
        this.showPicker = false;
        if (e) {


          //选择的值date.replace(/\//g, '-')
          this.value = e.value
          this.prize.starttime = e.value.replace(/\//g, '-')

          console.log('value => ' + e.value);
          //原始的Date对象
          console.log('date => ' + e.date);
        }
      },



      closeendtime(index) {
        this.createitem[index].show = false
      },
      showendtime(index) {
        this.type = 'datetime';
        this.createitem[index].show = true
      },
      //选择兑换方式
      bindPickerChangefs(e, index) {
        this.createitem[index].receiveTypeLabel = this.rangereceive[e.detail.value].text
        this.createitem[index].receiveType = this.rangereceive[e.detail.value].value

      },
      //选择优惠券
      bindPickerChange1(e, index) {

        this.createitem[index].prizecounpType = this.rangecounp[e.detail.value].name
        this.createitem[index].relateId = this.rangecounp[e.detail.value].id
        this.createitem[index].title = this.createitem[index].prizecounpType
      },


      getcoupon() {
        let data = {
          // page:1,
          // limit:100,
          // name:""
          status: 1
        }
        couponlist(data).then(res => {
          this.rangecounp = res.data.list
        })
      },
      confirmnew(e, index) {
        if (e) {
          this.createitem[index].endTime = e.value.replace(/\//g, '-')
        }

        this.createitem[index].show = false

      },
      confirmscnew(e) {
        console.log(e)
        this.prize.time = parseInt(this.columns[e.detail.value])

      },
      tj: Debounce((data) => {
        console.log(data)

        creatDraw(data).then(res => {
          uni.hideLoading()
          uni.showModal({
            title: '提示',
            content: '提交完毕',
            confirmText: '去查看',
            cancelText: '继续添加',
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/subpageC/store_choujiang/store_choujiang'
                })
              } else {
                uni.reLaunch({
                  url: '/pages/choujiang_add/choujiang_add'
                })
              }
            }
          })


        }).catch(error => {
          uni.showToast({
            title: error,
            icon: 'none'
          })
        });
      }, 800),
      async sub_draw() {

        if (this.prize.name == '') {
          uni.showToast({
            title: '请填写抽奖名称',
            icon: 'none'
          })
          return false
        } else if (this.prize.maxpeople == '' && this.active == 1) {
          uni.showToast({
            title: '请填写最多参与多少人',
            icon: 'none'
          })
          return false
        } else if (this.prize.minpeople == '') {
          uni.showToast({
            title: '请填写最少参与多少人',
            icon: 'none'
          })
          return false
        } else if (this.prize.starttime == '') {
          uni.showToast({
            title: '请填写开奖时间',

            icon: 'none'
          })
          return false
        } else if (this.prize.time == '') {
          uni.showToast({
            title: '请选择开奖时长',
            icon: 'none'
          })
          return false
        } else if (this.prize.remark == '') {
          uni.showToast({
            title: '请填写抽奖说明',
            icon: 'none'
          })
          return false
        }
        
        let data = {
          title: this.prize.name,
          image: this.prize.image,
          onlyFollow:this.prize.onlyFollow,
          maxPeople: this.prize.maxpeople ? Number(this.prize.maxpeople): 36,  // 5 * 7 + 1
          minPeople: Number(this.prize.minpeople),
          openTime: this.prize.starttime,
          openMinutes: this.prize.time,
          description: this.prize.remark,
          autoOpen: this.prize.autoOpen,
          drawNumber: 1
        }
        let arr = []
        if (this.prize.onlyFollow) {
          let info = await subscribeAll()
          if (info.data.length == 0) {
            uni.showToast({
              title: '粉丝为0，不能发布粉丝福利',
              icon: 'none'
            })
            return 
          }
        }
        if (this.active == 0) {
          let new_createitem = [...this.createitem]
          new_createitem.map((item, index) => {
            if (new_createitem.length > 1) {
              if (item.prizeType == '') {
                new_createitem.splice(index, 1)
              }
            } else {
              if (item.prizeType == '') {
                uni.showToast({
                  title: '至少一个奖品',
                  icon: 'none'
                })
              }
            }
          })
          //如果小于8个添加8-length个奖项为积分
          if (new_createitem.length < 8) {
            let num = 8 - new_createitem.length
            for (let i = 0; i < num; i++) {
              let random = (Math.floor(Math.random() * 100) + 1)
              this.addpoint = {}
              this.addpoint = {
                  title: random + '积分',
                  count: 5,
                  integral: random,
                  prizeType: 3,
                  prizeTypeLabel: '积分',
                  matchType: 0,
                },


                new_createitem.push(this.addpoint)
            }
          }
          console.log(new_createitem)
          //普通抽奖
          data.type = 1
          data.prizes = new_createitem
          uni.showLoading({
            title: '创建中...'
          })

        } else {
          if (this.prize.money == '') {
            uni.showToast({
              title: '请输入金额',
              icon: 'none'
            })
            return false
          }
          if (this.prize.money == 18) {
            data.drawNumber = 2
          }
          if (this.prize.money == 66) {
            data.drawNumber = 3
          }
          data.type = 2
          data.money = this.prize.money
          data.prizes = [{
            count: this.prize.maxpeople,
            money: this.prize.money,
            matchType: 0,
            prizeType: 4
          }]
        }
        this.tj(data)
      },
      sele() {
        this.type = 'datetime';
        this.showPicker = true;
        if (this.value == '') {

          this.value = this.gettime();
        }
      },
      bindPickerChange(e, index) {

        this.createitem[index].prizeType = this.rangeArr[e.detail.value].value
        this.createitem[index].prizeTypeLabel = this.rangeArr[e.detail.value].text
        if (this.createitem[index].prizeType == 2) {
          this.createitem[index].money = ''

          if (this.rangecounp.length == 0) {
            uni.showModal({
              title: '提示',
              content: '请联系平台专员添加优惠券，谢谢~',
              success: (res) => {

                this.createitem[index].prizeType = ''

              }
            })
          }

        } else if (this.createitem[index].prizeType == 3) {
          this.createitem[index].money = ''
          let random = (Math.floor(Math.random() * 50) + 1)
          this.createitem[index].name = random + '积分'
          this.createitem[index].integral = random

        }

        console.log(e)
      },
      tabtop(i) {
        this.active = i
        if(i==0) {
          this.prize.remark = desStr
        }
        if(i==1) {
          this.prize.remark = moneyStr
        }
      },
      del(i) {
        this.createitem.splice(i, 1)
      },

      confirm(e) {
        // console.log(e)
        // const timeFormat = $u.timeFormat
        // let g_time=this.sele_time
        console.log(e)
        this.prize.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
        console.log(this.prize.starttime)
        //this.result(e.value,e.mode)
        this.show = false
      },
      cancel(e) {
        this.show = false
      },

      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      addluck() {

        this.createitem.push({
          ...this.additem
        })
      },
      exchange() {
        uni.navigateTo({
          url: '/pages/choujiang/exchange'
        })
      }
    }
  }
</script>

<style lang="scss">
  .arrow {
    width: 28rpx;
  }

  textarea {
    width: 100%;
    border: 1rpx solid #ebebeb;
    height: 150rpx;
    padding: 20rpx;
  }

  button {
    border-radius: 8rpx !important;
  }

  .conter {
    display: inline-block;

    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    width: 100%;

    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
  }

  .fixedbtn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1rpx solid #D9D9D9;
    background-color: #fff;
    z-index: 999;
    // padding-bottom: constant(safe-area-inset-bottom);
    // 	padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 20rpx;
    padding-bottom: var(--safe-area-inset-bottom);

    .btn {
      margin-top: 20rpx;
      width: 90%;
      margin-left: 5%;
      height: 90rpx;
      border-radius: 200px;

      text-align: center;
      display: flex;

      justify-content: center;
      align-items: center;

    }

  }

  .but {
    padding: 20rpx;
    margin: 20rpx auto;
    margin-bottom: 140rpx;
    display: flex;
    width: 710rpx;
    padding: 20rpx 10rpx;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    border: 1px solid #DF4B43;
    color: #DF4B43;
    font-size: 28rpx;
    background: #FFF;
  }

  .input {
    text-align: right;
  }

  .pt {
    width: 100%;
    padding: 20rpx;
    background-color: #fff;

    .item {
      padding: 20rpx;
    }
  }

  .tab {
    width: 100%;
    position: fixed;
    top: 0;
    background: #fff;
    border-bottom: 1rpx solid #ebebeb;
    z-index: 999;

    .tab-item {
      width: 50%;
      text-align: center;
      line-height: 100rpx;

    }

    .active {
      color: #DF4B43;
    }
  }

  .pt {

    .item {
      border-bottom: 1rpx solid #fff;
    }

    .item:last-child {
      border: none
    }
  }

  .ptone {
    margin-top: 120rpx;
  }

  .set {
    padding-right: 30rpx;
    position: relative;

    .del {
      position: absolute;
      right: 0;
      top: 0
    }

    .item:last-child {
      border: none;
    }
  }

  page,
  body {
    background-color: #f5f5f5;
  }
</style>